<template>
  <div ref="chart" class="chart" :style="style"></div>
</template>

<script>
export default {
  name: "chart",
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    option: {
      type: Object,
      required: true
    },
    commonOption: {
      type: Object
    },
    color: {
      type: Array,
      default: () => {
        return [
          "#409eff",
          "#42b983",
          "#ffac48",
          "#ff7363",
          "#797cf8",
          "#a887b6"
        ];
      }
    }
  },
  watch: {
    option(n) {
      this.chart.setOption(n);
    }
  },
  data() {
    return {
      chart: null
    };
  },
  computed: {
    style() {
      return {
        width: this.width,
        height: this.height
      };
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs.chart);

    this.chart.setOption({
      color: this.color,
      ...this.option,
      ...this.commonOption
    });
  }
};
</script>

<style scoped></style>
